<template>
  <view style="background-color: #f8f8f8">
    <view class="headerimg">
      <swiper :autoplay="true" :interval="3000" :duration="1000" class="swiper">
        <swiper-item v-for="(item, index) in swiperlist" :key="index">
          <image :src="item" mode="aspectFill" style="width: 100%; height: 100%"></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 价格 -->
    <view class="price">
      <!-- 报名中 -->
      <view class="money">
        <view class="fullstyle">
          <text>￥</text>
          {{ pushData.price == 0 ? '免费' : pushData.price }}
          <view class="waitin">报名中</view>
        </view>
        <view @click="$refs.popup.open()"><image src="../static/icon/share.png" style="width: 40rpx; height: 40rpx; color: #ccc"></image></view>
      </view>
      <!-- 时间 -->
      <view class="title">{{ pushData.title }}</view>
      <view class="time">
        <image src="https://qn.boruichengyi.com/static/index/images/time.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom; margin-right: 12rpx"></image>
        <text class="timetext">时间：{{ pushData.start_time + '-' + pushData.end_time }}</text>
      </view>
      <!-- 地点 -->
      <view class="place" @click="goaddress(pushData.address)">
        <image src="https://qn.boruichengyi.com/static/index/images/position.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom; margin-right: 12rpx"></image>
        地点：
        <text style="width: 504rpx; height: 80rpx" class="title">{{ pushData.address }}</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <!-- 人数 -->
    <view class="peolple">
      <view class="peoplenumber">
        <view class="peopleleft">
          <image src="../static/icon/totalpeople.png" mode="" style="width: 40rpx; height: 40rpx; vertical-align: bottom; margin-right: 10rpx"></image>
          <text>人数 (0{{ '/' + pushData.max_num }})</text>
        </view>
        <view class="peopleright">
          <image src="../static/icon/gendernan.png" mode="" style="width: 40rpx; height: 40rpx; vertical-align: bottom"></image>
          <text>0</text>
          <image src="../static/icon/gendernv.png" mode="" style="width: 40rpx; height: 40rpx; vertical-align: bottom"></image>
          <text>0</text>
        </view>
      </view>
      <view class="avatat">
        <view>
          <view class="avatatItem" style="background-color: #d2d2d2; border: 1px solid #fff; text-align: center; line-height: 80rpx; color: #fff; line-height: 80prx">...</view>
        </view>
      </view>
    </view>
    <!-- 发起者 -->
    <view class="pusherdiv">
      <view class="pusher">
        <image src="../static/icon/personl.png" mode="" style="width: 32rpx; height: 32rpx; vertical-align: bottom; margin-right: 12rpx"></image>
        发起者
      </view>
      <view class="personInfo">
        <view>
          <image :src="userinfo.avatar" class="puseravatar" mode="aspectFill"></image>
          <text>{{ userinfo.nickname }}</text>
        </view>
        <view class="callher" @click="$refs.callRef.open()" v-if="false">联系他</view>
      </view>
    </view>
    <!-- 详情 -->
    <view class="detail">
      <view class="title">
        <image src="../static/icon/detail.png" mode="" class="detailicon"></image>
        <text>详情</text>
      </view>
      <rich-text :nodes="content"></rich-text>
    </view>
    <view class="tip">
      <view>
        <image src="../static/icon/tip.png" class="detailicon" mode=""></image>
        <text>温馨提示</text>
      </view>
      <rich-text :nodes="pushData.tip.content"></rich-text>
    </view>

    <!-- 发布按钮 -->
    <view class="btndad" @click="pushact"><button class="signup">发布</button></view>

    <!-- 分享弹窗 -->
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="itemtitle">分享</view>
      <view class="item"><button open-type="share" class="btnshare" style="font-size: 32rpx; background-color: transparent">直接分享</button></view>
      <view class="item" @click="saveactimg(actdetail.id)">保存图片</view>
      <view class="item" @click="$refs.popup.close()">取消</view>
    </uni-popup>
    <!-- 联系他弹框 -->
    <uni-popup ref="callRef" type="center">
      <view class="container">
        <view class="header" @click="$refs.callRef.close()">
          <image src="../static/icon/close.png" mode="" class="closeicon"></image>
        </view>
        <view class="headerTitle">提示</view>
        <view class="numbercontainer">
          <view class="number">联系电话：{{ pushData.phone }}</view>
          <view class="phoneicon" @click="calluser(pushData.phone)">
            <image src="../static/icon/callPhone.png" class="phoneicon" mode=""></image>
          </view>
        </view>
        <!-- 二维码 -->
        <view class="imagecontainer">
          <view class="imageItem">
            <image :src="pushData.wx_qrcode_image" mode="aspectFill" class="imageformat" :show-menu-by-longpress="true"></image>
            <view style="margin-left: 73rpx; margin-top: 20rpx; font-weight: 700">个人微信</view>
          </view>
          <view class="imageItem">
            <image :src="pushData.wx_group_qrcode_image" mode="aspectFill" class="imageformat" :show-menu-by-longpress="true"></image>
            <view style="margin-left: 73rpx; margin-top: 20rpx; font-weight: 700">微信群</view>
          </view>
        </view>
        <!-- 长按保存 -->
        <view class="bootomtip">长按或者保存添加微信</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { timeChange } from '../../utils/tools.js';
import qqmap from '../../utils/qqmap.js';
import { btoa } from 'js-base64';
export default {
  data() {
    return {
      pushData: {},
      userinfo: {},
      swiperlist: [],
      is_auth: null, // 实状态
      ischange: false, // 是否转码
      content: ''
    };
  },
  onLoad(opt) {
    this.getuserinfo();
    console.log(opt);
    if (opt.pushData) {
      console.log(JSON.parse(decodeURIComponent(opt.pushData)));
      this.pushData = JSON.parse(decodeURIComponent(opt.pushData));
      if (opt.type == 1) {
        this.swiperlist = this.pushData.banner_images.split(',');
      } else {
        this.swiperlist = this.pushData.banner_images.split(',');
      }
    }
    this.userinfo = JSON.parse(uni.getStorageSync('userinfo'));

    if (typeof this.pushData.start_time == 'number') {
      if (this.pushData.start_time != 0) {
        this.pushData.start_time = this.timeChange(this.pushData.start_time);
        this.pushData.end_time = this.timeChange(this.pushData.end_time);
      }
    } else {
    }
    this.content = this.pushData.content;
  },
  methods: {
    timeChange(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();

      return Y + M + D + h + m;
    },
    // 获取个人信息
    async getuserinfo() {
      const res = await uni.$http.post('user/index');
      this.userinfo.avatar = res.data.data.avatar;
      this.userinfo.nickname = res.data.data.nickname;
      this.is_auth = res.data.data.is_auth;
    },
    async pushact() {
      if (this.is_auth != 2) {
        uni.showToast({
          title: '实名通过后才可以发布活动',
          icon: 'none'
        });
        return;
      }
      if (new Date(this.pushData.start_time).getTime() < new Date().getTime()) {
        uni.showToast({
          title: '请选则活动时间',
          icon: 'none'
        });
        return;
      }
      if (!/^1[3-9][0-9]{9}$/.test(this.pushData.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        });
        return;
      }
      this.pushData.start_time = String(new Date(this.pushData.start_time).getTime() / 1000);
      this.pushData.end_time = String(new Date(this.pushData.end_time).getTime() / 1000);
      // this.pushData.token = JSON.parse(uni.getStorageSync('userinfo') || '{}').token;
      delete this.pushData.id;
      console.log('发布前的数据--', this.pushData);
      console.log('转译为base64格式加密--', btoa(unescape(encodeURIComponent(this.pushData.content))));

      if (!this.ischange) {
        this.pushData.content = btoa(unescape(encodeURIComponent(this.pushData.content)));
      }
      this.ischange = true;
      console.log('this.ischange--------', this.ischange);
      const res = await uni.$http.post('user/addActivity', {
        ...this.pushData
      });

      if (res.data.code == 1) {
        uni.redirectTo({
          url: '/sub_my/exportactdata/exportactdata'
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
      }
    },
    // 保存分享图片
    async saveactimg(id) {
      const res = await uni.$http.post('index/shareActivity', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });

      if (res.data.code == 1) {
        uni.saveImageToPhotosAlbum({
          filePath: res.data.data
        });
        this.$refs.popup.close();
        uni.showToast({
          title: '图片保存成功',
          icon: 'none'
        });
      }
    },
    // TODO代办
    // 地址逆解析
    goaddress(address) {
      qqmap.geocoder({
        address,
        success: (res) => {
          console.log(res.result.location);
          uni.openLocation({
            latitude: res.result.location.lat,
            longitude: res.result.location.lng,
            success: (res) => {
              console.log(res);
            }
          });
        }
      });
    },
    // 导出他人信息
    exportuserinfo() {},

    // 删除活动
    async delbtn(id) {
      const res = await uni.$http.post('user/delActivity', {
        activity_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      console.log(res.data.code);
      if (res.data.code == 0) {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
      }
      this.$refs.delactRef.close();
    }
  }
};
</script>

<style lang="less">
// 导出按钮
.export {
  display: inline-block;
  width: 140rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #0398ff;
  background: rgba(3, 152, 255, 0.11);
  margin-right: 30rpx;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  border: 2rpx solid #0398ff;
}
// 头部已取消
.cnalcetext {
  margin-top: 6rpx;
  font-size: 24rpx;
}
// 删除按钮
.delbtn {
  width: 690rpx;
  height: 90rpx;
  line-height: 90rpx;
  background: #ec1303;
  color: #fff;
  font-size: 30rpx;

  border-radius: 46rpx 46rpx 46rpx 46rpx;
}

//  取消报名弹框
.canceladd {
  width: 690rpx;
  height: 400rpx;
  background: #fff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  .title {
    width: 60rpx;
    height: 42rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin: 0rpx 315rpx 78rpx 315rpx;
    padding-top: 30rpx;
  }
  .canceltext {
    width: 364rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin: 0 163rpx 74rpx 163rpx;
  }
  .cancelfooter {
    display: flex;
    .cancelokbtn {
      width: 300rpx;
      height: 90rpx;
      line-height: 90rpx;
      text-align: center;
      color: #fff;
      margin-left: 36rpx;
      background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
      border-radius: 46rpx 46rpx 46rpx 46rpx;
    }
    .cancelbtn {
      width: 300rpx;
      height: 90rpx;
      background: #f1f1f1;
      line-height: 90rpx;
      text-align: center;
      color: #000000;
      margin-left: 20rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
/* 分享弹框 */
.itemtitle {
  text-align: center;
  line-height: 120rpx;
  font-weight: 800;
}
.item {
  text-align: center;
  line-height: 120rpx;
  .btnshare::after {
    border: none;
  }
}
/* 已爆满 */
.full {
  width: 90rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  margin-left: 20rpx;
  color: #fff;
  background: #ec1303;
  font-size: 20rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 0.8;
}
.fullstyle {
  display: flex;
}
// 报名中
.waitin {
  width: 90rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  margin-left: 20rpx;
  color: #fff;
  background: #7f7f7f;
  font-size: 20rpx;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
/* 已报名 */
.freetext {
  width: 80rpx;
  height: 56rpx;
  font-size: 40rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 800;
  color: #ec1303;
  line-height: 56rpx;
  -webkit-background-clip: text;
}
.aleadysign {
  margin-left: 10rpx;
  width: 90rpx;
  height: 40rpx;
  font-size: 20rpx;
  line-height: 40rpx;
  text-align: center;
  font-weight: 500;
  color: #fff;
  background: #000000;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 0.5;
}
.aleady {
  display: flex;
  align-items: center;
}
/* 已报名中的取消报名 */
.cancelsign {
  width: 690rpx;
  height: 90rpx;
  background: #f1f1f1;
  border-radius: 46rpx 46rpx 46rpx 46rpx;
}
.cancelsign::after {
  border: none !important;
}
.uni-popup__wrapper.center {
  background-color: transparent !important;
}
.headerimg {
  width: 750rpx;
  height: 500rpx;

  .swiper {
    width: 750rpx;
    height: 500rpx;
  }
}
.price {
  position: relative;
  z-index: 2;
  top: -30rpx;
  padding: 28rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
}
.money {
  display: flex;
  font-family: PingFang SC, PingFang SC;
  justify-content: space-between;
  margin: 22rpx 0rpx 12rpx 0rpx;
  font-weight: 800;
  color: #ec1303;
}
.title {
  height: 84rpx;
  font-size: 30rpx;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.time {
  margin-top: 28rpx;
}
.timetext {
  font-size: 28rpx;
}
.place {
  display: flex;
  margin-top: 30rpx;
  align-items: flex-start;
  font-size: 28rpx;
}

.btndad {
  width: 750rpx;
  height: 130rpx;
  background: #fff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.signup {
  width: 690rpx;
  height: 90rpx;
  color: #fff;
  background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
  border-radius: 46rpx 46rpx 46rpx 46rpx;
  margin-bottom: 20rpx;
  opacity: 1;
}
.peoplenumber {
  padding: 28rpx;
  display: flex;
  justify-content: space-between;
}
.peolple {
  width: 750rpx;
  height: 212rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.avatatItem {
  width: 80rpx;
  height: 80rpx;
  display: inline-block;
  margin-left: -30rpx;
  border-radius: 50%;
  vertical-align: middle;
}
.avatat {
  display: flex;
  justify-content: space-between;
  padding-left: 58rpx;
}
.pusherdiv {
  margin-top: 10rpx;
  padding: 28rpx;
  margin-bottom: 10rpx;
  height: 210rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.puseravatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 10rpx;
  border-radius: 38rpx 38rpx 38rpx 38rpx;
  opacity: 1;
  border: 2rpx solid #ffffff;
  vertical-align: middle;
}
.callher {
  width: 140rpx;
  height: 60rpx;
  background: rgba(3, 152, 255, 0.11);
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  opacity: 1;
  text-align: center;
  line-height: 60rpx;
  color: #0398ff;
  border: 2rpx solid #0398ff;
}
.personInfo {
  display: flex;
  justify-content: space-between;
  margin-top: 28rpx;
}
.detail {
  width: 750rpx;
  background: #ffffff;
  padding: 28rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.detailicon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
  vertical-align: bottom;
}
.detailtext {
  width: 696rpx;
  height: 236rpx;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 50rpx;
  -webkit-background-clip: text;
}
.detailimage {
  margin: 20rpx 110rpx;
  width: 478rpx;
  height: 320rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.bottondeatiltext {
  width: 696rpx;
  height: 136rpx;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 50rpx;
  -webkit-background-clip: text;
}
.tip {
  width: 750rpx;
  height: 466rpx;
  padding: 28rpx;
  margin-bottom: 100rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
}
.tiptext {
  width: 696rpx;
  height: 336rpx;
  font-size: 26rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 50rpx;
  -webkit-background-clip: text;
}
/* 此处是联系他弹框 */
.container {
  width: 690rpx;
  height: 652rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  opacity: 1;
  .closeicon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 40rpx;
    margin-top: 30rpx;
  }
  .header {
    display: flex;
    justify-content: flex-end;
  }
  .headerTitle {
    font-weight: 700;
    text-align: center;
    font-size: 30rpx;
  }
  .numbercontainer {
    display: flex;
    margin-top: 52rpx;
    justify-content: space-between;
    .phoneicon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 50rpx;
      vertical-align: middle;
    }
    .number {
      margin-left: 36rpx;
      height: 40rpx;
      color: #000000;
      font-weight: 700;
      font-size: 28rpx;
    }
  }
  .imagecontainer {
    display: flex;
    margin-top: 30rpx;
    .imageItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .imageformat {
        width: 236rpx;
        height: 236rpx;
        margin-left: 73rpx;
      }
    }
  }
  .bootomtip {
    width: 260rpx;
    height: 36rpx;
    font-size: 26rpx;
    margin: 40rpx 216rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
</style>
